<template>
  <view class="app-container">
    <!-- 顶部绿色导航栏 -->
    <view class="top-bar">
    </view>
    <!-- 中间内容区域 -->
    <view class="middle-content">
      <image src="/static/login1.jpg" mode="widthFix" style="width: 150rpx; margin-bottom: 40rpx;"></image>
      <text class="app-name">农检通</text>
      <text class="app-desc">食用农产品合格证管理系统</text>
      <!-- 可选：添加倒计时提示，让用户知道需等待5秒 -->
      <text class="countdown" style="margin-top: 80rpx; color: #666; font-size: 28rpx;">
        {{countdown}}秒后至登录页... 
      </text>
    </view>
    
    <!-- 底部绿色区域：文字在“获”字后换行且居中 -->
    <view class="bottom-bar">
      <text class="bottom-text">专业解决食用农产品合格证出具，获取，传输和追溯问题，确保交易合格</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      countdown: 5, // 倒计时秒数（可选，用于UI提示）
      timer: null // 定时器实例（用于页面卸载时清除，避免内存泄漏）
    };
  },
  onLoad() {
    // 1. 启动5秒定时器，到期后跳转至login页面
    this.timer = setTimeout(() => {
      // 跳转逻辑：根据需求选择跳转方式
      // - navigateTo：保留当前页面，可返回（适合“欢迎页→登录页”）
      // - redirectTo：关闭当前页面，不可返回（适合“启动页→登录页”）
      uni.redirectTo({
        url: '/pages/njt/login' // 注意：替换为你实际的login页面路径！
      });
    }, 5000); // 5000毫秒 = 5秒
    
    // 2. 可选：实现倒计时UI更新（让用户直观看到等待时间）
    const countInterval = setInterval(() => {
      this.countdown--;
      // 倒计时到0时清除interval，避免冗余执行
      if (this.countdown <= 0) {
        clearInterval(countInterval);
      }
    }, 1000);
  },
  onUnload() {
    // 页面卸载时清除定时器，防止页面已销毁但定时器仍执行（内存泄漏）
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
};
</script>

<style scoped>
/* 全局样式重置 */
page {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.top-bar {
  width: 100%;
  height: 88rpx;
  background-color: #169c2c;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.switch::after {
  content: '';
  position: absolute;
  width: 28rpx;
  height: 28rpx;
  background-color: #0aa573;
  border-radius: 50%;
  top: 2rpx;
  right: 2rpx;
}

/* 中间内容区域 */
.middle-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.icon-container {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.app-name {
  font-size: 50rpx;
  color: #0aa573;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.app-desc {
  font-size: 32rpx;
  color: #0aa573;
  text-align: center;
  word-break: break-all;
  margin-bottom: 50rpx;
}

/* 底部区域：保证文字容器居中 */
.bottom-bar {
  margin-top: 10%;
  width: 100%;
  padding: 150rpx 40rpx;
  min-height: 200rpx;
  background-color: #169c2c;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 核心：控制“获”字后换行 + 文字居中 */
.bottom-text {
  margin-top: 10rpx;
  color: white;
  font-size: 28rpx;
  line-height: 1.8;
  text-align: center;
  word-break: break-all;
  width: 450rpx;
}
</style>